<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:ic="http://ivyteam.ch/jsf/component"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:pm="http://primefaces.org/mobile">
 
    <ui:composition template="/template/MainTemplate.xhtml">
    	
    	<ui:define name="title">Main</ui:define>
    	<ui:define name="content">
    		<f:event listener="#{logic.onPreRenderPage}" type="preRenderView"></f:event>
    		<p:tabView id="mainTab" activeIndex="1" orientation="left" dynamic="true" cache="false" widgetVar="mainTabView">
    			<p:ajax event="tabChange" listener="#{logic.onTabChange}"  />
    			<p:tab title="Compose">
    				<h:form id="frmSendingEmail">
    					<table style="width: 100%" cellpadding="5" >
    						<tr>
    							<td colspan="2">
    								<p:messages autoUpdate="true" showDetail="true"/>
    							</td>
    						</tr>
    						<tr>
    							<td>From:</td>
    							<td><h:outputText value="#{ivy.session.getSessionUser().getEMailAddress()}" /> </td>
    						</tr>
    						<tr>
    							<td>To:</td>
    							<td>
<!--     								<p:selectOneMenu id="dropSelectEmail" value="#{data.email.receiver}" style="width: 100%"> -->
<!--     									<f:selectItem itemLabel="Select Email" itemValue=""></f:selectItem> -->
<!--             							<f:selectItems value="#{data.memberList}"  var="member" itemLabel="#{member.getFullName()} - #{member.getEMailAddress()}" itemValue="#{member.getEMailAddress()}" />   -->
<!--     								</p:selectOneMenu> -->
    								
									<p:autoComplete  id="dropSelectEmail" dropdown="true" value="#{data.email.receiver}" forceSelection="true"
                    									completeMethod="#{logic.onCompleteSelectEmailStr}"  /> 
    							</td>
    						</tr>
    						<tr>
    							<td>Subject:</td>
    							<td><p:inputText id="txtSubject" value="#{data.email.subject}" style="width: 100%" /></td>
    						</tr>
    						<tr>
    							<td>Content:</td>
    							<td><p:editor id="txaContent" value="#{data.email.content}" style="width: 100%" controls="bold italic underline strikethrough | alignleft center alignright | bullets numbering" /></td>
    						</tr>
    						<tr>
    							<td></td>
    							<td style="text-align: right;">
    								<p:commandButton id="btnSaveDraft" actionListener="#{logic.onBtnSaveDraft}" value="Save as Draft"  />
    								<p:commandButton id="btnSendEmail" update="frmSendingEmail" actionListener="#{logic.onBtnSendEmailClick}" value="Send Email"  />
    								<p:blockUI block="frmSendingEmail" trigger="btnSendEmail">
										Sending Email
									</p:blockUI> 
									<p:blockUI block="frmSendingEmail" trigger="btnSaveDraft">
										Saving Draft
									</p:blockUI> 
    							</td>
    						</tr>
    					</table>
    				</h:form>
    				
    			</p:tab>
    			<p:tab id="inboxTab" title="Inbox">
    				<h:form id="frmMailTable">
	    				<p:messages showDetail="true" />
	    				<p:dataTable id="mailTable" var="mail" value="#{data.emailList}" emptyMessage="No Email.">
	    					
	    					<p:column headerText="Sender">  
	    						<p:remoteCommand actionListener="#{logic.onClickDeleteEmail(mail.id)}" name="deleteEmail_#{mail.id}" update=":mainTab:frmMailTable"></p:remoteCommand>
	    						<p:remoteCommand actionListener="#{logic.onClickForward(mail)}" name="forwardEmail_#{mail.id}"></p:remoteCommand>
					            <h:outputText value="#{mail.sender}" style="#{mail.is_read == false ? 'font-weight: bold;' : ''}" />  
					        </p:column>
					        <p:column headerText="Subject">  
					            <h:outputText value="#{mail.subject}" style="#{mail.is_read == false ? 'font-weight: bold;' : ''}" />  
					        </p:column>
					        <p:column headerText="Sent Date">  
					            <h:outputText value="#{mail.send_date}" style="#{mail.is_read == false ? 'font-weight: bold;' : ''}" />  
					        </p:column>
					        <p:column headerText="Options">  
					            <p:commandLink styleClass="btn-view" value="View" actionListener="#{logic.onViewEmail(mail.id)}"></p:commandLink> | 
					            <p:commandLink value="Forward" onclick="forwardEmailHandler('#{mail.id}')"></p:commandLink> | 
					            <p:commandLink value="Delete" onclick="if(askForDeleteConfirmation()) { deleteEmail_#{mail.id}() } else { return false; }" style="color: red;" ></p:commandLink>
					        	<p:rowToggler></p:rowToggler>
					        </p:column>
					        
					        <p:rowExpansion>
					        	 <h:outputText value="#{mail.content}" escape="false"></h:outputText>
					        </p:rowExpansion>
					        
	    				</p:dataTable>
	    				<script type="text/javascript">
							rowToggler();
						</script>
  					</h:form>
    			</p:tab>
    			<p:tab id="draftTab" title="Draft">
    				<h:form id="frmDraftMailTable">
	    				<p:messages showDetail="true" />
	    				<p:dataTable id="draftMailTable" var="draft" value="#{data.draftEmailList}" emptyMessage="No draft email.">
	    					
	    					<p:column headerText="Receiver">  
	    						<p:remoteCommand actionListener="#{logic.onClickDeleteEmail(draft.id)}" name="deleteEmail_#{draft.id}" update=":mainTab:frmDraftMailTable"></p:remoteCommand>
	    						<p:remoteCommand actionListener="#{logic.resumeEditEmail(draft)}" name="resumeEdit_#{draft.id}"></p:remoteCommand>
	    						<h:outputText value="#{draft.receiver}"/>  
					        </p:column>
					        <p:column headerText="Subject">  
					            <h:outputText value="#{draft.subject}" />  
					        </p:column>
					        <p:column headerText="Sent Date">  
					            <h:outputText value="#{draft.send_date}" />  
					        </p:column>
					        <p:column headerText="Options">  
					            <p:commandLink styleClass="btn-view" value="View" ></p:commandLink> | 
					            <p:commandLink styleClass="btn-resume" value="Resume Editing" onclick="resumeEditHandler('#{draft.id}')"></p:commandLink> |
					            <p:commandLink value="Delete" onclick="if(askForDeleteConfirmation()) { deleteEmail_#{draft.id}() } else { return false; }" style="color: red;" ></p:commandLink>
					        	<p:rowToggler></p:rowToggler>
					        </p:column>
					        
					        <p:rowExpansion>
					        	 <h:outputText value="#{draft.content}" escape="false"></h:outputText>
					        </p:rowExpansion>
					        
	    				</p:dataTable>
	    				<script type="text/javascript">
							rowToggler();
						</script>
						
  					</h:form>
    			</p:tab>
    		</p:tabView>
    		
    	</ui:define>
    </ui:composition>
</html>